<template>
  <!-- 第一个 停电检测 -->
  <div>
    <!-- 二级标题 -->
    <dv-border-box-11 title="⚡️ 订单统计" style="width: 940px; height: 480px">
      <div style="display: flex; align-items: center;width: 100%">
        <!-- 三级标题 -->
        <div>
          <div>
            <dv-border-box-5
              :color="['#225762', '#225762']"
              style="top: 70px; left: 20px;"
            >
              <div
                style="
                  padding-left: 15px;
                  padding-top: 8px;
                  font-size: 18px;
                  font-weight: 700;
                  color: #33ffff;
                "
              >
                ⚠️ 订单列表
              </div>
            </dv-border-box-5>
          </div>

          <!-- 里面的内容——滚动表格 -->
          <div>
            <dv-border-box-8
              style="
                top: 80px;
                left: 20px;
                width: 555px;
                height: 340px;
                color: #fff;
              "
            >
              <div
                style="
                  padding: 15px 10px;
                  font-size: 18px;
                  font-weight: 700;
                  color: #fff;
                "
              >
                <!-- 表格 -->
                <div style="margin: 10px">
                  <lineTable></lineTable>
                </div>
              </div>
            </dv-border-box-8>
          </div>
        </div>

        <div>
          <!-- 下面 -->
          <div class="flex">
            <div>
              <!-- 三级标题 -->
              <div>
                <dv-border-box-5
                  :color="['#225762', '#225762']"
                  style="top: 70px; left: 20px; width: 100%; height: 100%"
                >
                  <div
                    style="
                      padding-left: 15px;
                      padding-top: 8px;
                      font-size: 18px;
                      font-weight: 700;
                      color: #33ffff;
                    "
                  >
                    ⚒️ 订单数量
                  </div>
                </dv-border-box-5>
              </div>

              <div>
                <dv-border-box-8
                  style="
                    top: 80px;
                    left: 20px;
                    width: 345px;
                    height: 340px;
                    color: #fff;
                  "
                >
                  <div
                    style="
                      padding: 5px 0;
                      font-size: 18px;
                      font-weight: 700;
                      color: #fff;
                    "
                  >
                    <barChart></barChart>
                  </div>
                </dv-border-box-8>
              </div>
            </div>
            <!--
            <div style="margin-left: 40px">
              三级标题
               
              <div>
                <dv-border-box-5
                  :color="['#225762', '#225762']"
                  style="top: 120px; left: 40px; width: 280px; height: 40px"
                >
                  <div
                    style="
                      padding-left: 15px;
                      padding-top: 8px;
                      font-size: 18px;
                      font-weight: 700;
                      color: #33ffff;
                    "
                  >
                    💡 重点关注停电
                  </div>
                </dv-border-box-5>
              </div>

              <div>
                <dv-border-box-8
                  style="
                    top: 130px;
                    left: 40px;
                    width: 385px;
                    height: 340px;
                    color: #fff;
                  "
                >
                  <div
                    style="
                      padding: 10px;
                      font-size: 18px;
                      font-weight: 700;
                      color: #fff;
                    "
                  >
                    动态环图
                    <ringChart></ringChart>

                    动态滚动数据
                    <rowTable></rowTable>
                  </div>
                </dv-border-box-8>
              </div>
            </div>
            -->
          </div>
        </div>
      </div>
    </dv-border-box-11>
  </div>
</template>

<style lang="scss" scoped>
.flex {
  display: flex;
}
</style>




<script setup lang="ts">
import lineTable from "/@/components/FirstComponent/lineTable.vue";
import barChart from "/@/components/FirstComponent/barChart.vue";


import capsuleChart from "/@/components/FirstComponent/capsuleChart.vue";

import ringChart from "/@/components/FirstComponent/ringChart.vue";
import rowTable from "/@/components/FirstComponent/rowTable.vue";
</script>